<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">文章详情</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<view class="cu-card article no-card">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-cut">{{ item.title }}</view>
				</view>
				<view class="flex padding-left-sm padding-right-sm justify-between">
					<view class="text-gray text-df">{{ item.updateTime }}</view>
					<view class="text-gray text-df text-right padding-right-sm">
						{{ item.author }}
					</view>
				</view>
			</view>
		</view>
		<mp-html container-style="padding: 20px; white-space: pre-wrap; white-space: pre-line;"
		:markdown="true"
		:content="item.content"/>
		<view class="cu-bar bg-white solid-bottom margin-top" v-if="item.commentNum > 0">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>评论（{{ item.commentNum }}条）
			</view>
			<view class="action" v-if="item.commentNum > commentList.length">
				<text class="text-df margin-right-sm" @tap="goComment">查看更多>>></text>
			</view>
		</view>
		<view class="cu-list menu-avatar comment solids-top" >
			<view class="cu-item" v-for="(comment, index) in commentList" :key="index">
				<image :src="comment.avatar" class="cu-avatar round" ></image>
				<view class="content">
					<view class="text-grey">{{ comment.nickName }}</view>
					<view class="text-gray text-content text-df">
						{{ comment.comment }}
					</view>
					<view class="bg-grey padding-sm radius margin-top-sm text-sm" v-if="comment.reply">
						<view class="flex">
							<view>作者：</view>
							<view class="flex-sub">{{ comment.reply }}</view>
						</view>
					</view>
					<view class="margin-top-sm flex justify-end">
						<view class="text-gray text-df"> {{ comment.commentTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar foot input" :style="[{bottom:inputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-likefill text-red" v-if="isCollection" @tap="cancel"></text>
				<text class="cuIcon-like text-grey"  v-else @tap="collection"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="inputFocus" @blur="inputBlur" v-model="commentContent"></input>
			<button class="cu-btn bg-green shadow" @tap="commentArticle">评论</button>
		</view>
	</view>
</template>

<script>
	import * as article from '@/api/blog/article/article.js'
	import * as comment from '@/api/blog/article/comment.js'
	import * as collection from '@/api/blog/member/collection.js'
	export default {
		data() {
			return {
				inputBottom: 0,
				articleId: null,
				isLoad: false,
				item: {
					id: '',
					title: '',
					author: '',
					content: '',
					coverImage: 0,
					commentNum: 0,
					updateTime: ''
				},
				isCollection: 0,
				commentContent: '',
				commentList: []
			}
		},
		onLoad: function(options) {
			this.articleId = options.id
			this.loadData()
		},
		onShareAppMessage: function(res) {
			return {
				title: this.item.title,
				path: '/pages/article/detail?id='+this.item.id,
				imageUrl: this.item.coverImage
			}
		},
		onShareTimeline() {
			return {
				title: this.item.title,
				path: '/pages/article/detail?id='+this.item.id,
				imageUrl: this.item.coverImage
			}
		},
		methods: {
			inputFocus(e) {
				this.inputBottom = e.detail.height
			},
			inputBlur(e) {
				this.inputBottom = 0
			},
			goComment() {
				this.$tools.go('./comment?articleId=' + this.articleId)
			},
			commentArticle() {
				if (this.isLoad) {
					return false
				}
				const isAuth = this.$tools.isAuth();
				if (isAuth) {
					if (!this.commentContent) {
						this.$tools.showToast({
							msg:'请输入评论内容'
						})
						return false
					}
					this.isLoad = true
					comment.add({
						articleId: this.articleId,
						comment: this.commentContent
					}).then(res => {
						this.isLoad = false
						if (res.code === 1) {
							this.$tools.showToast({
								msg:'评论成功',
								icon:'success',
								duration: 2000
							})
							this.commentContent = ''
						}
					})
				}
			},
			collection() {
				if (this.isLoad) {
					return false
				}
				const isAuth = this.$tools.isAuth();
				if (isAuth) {
					this.isLoad = true
					collection.add({
						id: this.articleId
					}).then(res => {
						this.isLoad = false
						if (res.code === 1) {
							this.$tools.showToast({
								msg:'收藏成功',
								icon:'success',
								duration: 2000
							})
							this.isCollection = 1
						}
					})
				}
			},
			cancel() {
				if (this.isLoad) {
					return false
				}
				const isAuth = this.$tools.isAuth();
				if (isAuth) {
					this.isLoad = true
					collection.modify({
						id: this.articleId
					}).then(res => {
						this.isLoad = false
						if (res.code === 1) {
							this.$tools.showToast({
								msg:'取消收藏成功',
								icon:'success',
								duration: 2000
							})
							this.isCollection = 0
						}
					})
				}
			},
			async loadData() {
				this.isLoad = true
				// 文章信息
				this.item = await article.get({
					id: this.articleId
				}).then(res => {
					if (res.code === 1) {
						const data = res.data
						data.coverImage = this.$tools.getImg(data.coverImage, '/static/default.png')
						data.updateTime = this.$tools.formatDate(data.updateTime)
						return this.$tools.mergeObjSamePro(this.item, data)
					}
				})
				// 是否收藏
				this.isCollection = await collection.get({
					id: this.articleId
				}).then(res => {
					if (res.code === 1) {
						return res.data || 0
					}
				})
				// 评论
				this.commentList = await comment.getPage({
					pageNumber: 1,
					pageSize: 5,
					articleId: this.articleId
				}).then(res => {
					if (res.code === 1) {
						const rows = res.data.rows || []
						rows.forEach(item => {
							item.avatar = this.$tools.getImg(item.avatar, '/static/logo.png')
							item.commentTime = this.$tools.formatDate(item.commentTime)
						})
						return rows;
					}
				})
				this.isLoad = false
			}
		}
	}
</script>

<style>

</style>
